{% extends 'base.html' %}
{% load custom_filters %}

{% block content %}
  <h1 class="text-center mb-4">{% if form.instance.pk %}编辑{% else %}添加{% endif %}待办事务</h1>
  <form method="post" class="needs-validation container mt-4" style="max-width: 800px;" novalidate>
    {% csrf_token %}
    <div class="mb-3">
      <label for="{{ form.class_info.id_for_label }}" class="form-label">所属班级</label>
      {{ form.class_info|add_class:"form-control" }}
      {% if form.class_info.errors %}
        <div class="invalid-feedback d-block">{{ form.class_info.errors|join:"; " }}</div>
      {% endif %}
    </div>
    <div class="mb-3">
      <label for="{{ form.start_time.id_for_label }}" class="form-label">开始时间</label>
      {{ form.start_time|add_class:"form-control date-picker" }}
      {% if form.start_time.errors %}
        <div class="invalid-feedback d-block">{{ form.start_time.errors|join:"; " }}</div>
      {% endif %}
    </div>
    <div class="mb-3">
      <label for="{{ form.end_time.id_for_label }}" class="form-label">截止时间</label>
      {{ form.end_time|add_class:"form-control date-picker" }}
      {% if form.end_time.errors %}
        <div class="invalid-feedback d-block">{{ form.end_time.errors|join:"; " }}</div>
      {% endif %}
    </div>
    <div class="mb-3">
      <label for="{{ form.content.id_for_label }}" class="form-label">待办内容</label>
      {{ form.content|add_class:"form-control" }}
      {% if form.content.errors %}
        <div class="invalid-feedback d-block">{{ form.content.errors|join:"; " }}</div>
      {% endif %}
    </div>
    {% if form.instance.pk %}
      <div class="mb-3">
        <label for="{{ form.is_completed.id_for_label }}" class="form-label">是否处理</label>
        {{ form.is_completed|add_class:"form-check-input" }}
        {% if form.is_completed.errors %}
          <div class="invalid-feedback d-block">{{ form.is_completed.errors|join:"; " }}</div>
        {% endif %}
      </div>
      <div class="mb-3">
        <label for="{{ form.handling_measures.id_for_label }}" class="form-label">处理措施</label>
        {{ form.handling_measures|add_class:"form-control" }}
        {% if form.handling_measures.errors %}
          <div class="invalid-feedback d-block">{{ form.handling_measures.errors|join:"; " }}</div>
        {% endif %}
      </div>
    {% endif %}
    <button type="submit" class="btn btn-primary">提交</button>
    <a href="{% url 'core:task_list' %}" class="btn btn-secondary">取消</a>
  </form>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
      (() => {
        'use strict'
        flatpickr(".date-picker", { dateFormat: "Y-m-d" });
        const forms = document.querySelectorAll('.needs-validation')
        Array.from(forms).forEach(form => {
          form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
              event.preventDefault()
              event.stopPropagation()
            }
            form.classList.add('was-validated')
          }, false)
        })
      })()
    </script>
{% endblock %}